<template>
  <div class="addressList">
    <div class="no-addr" v-if="$store.state.address.addrList.length<=0">
      <p>您当前还未添加任何地址</p>
      <van-button to="/home/addAddr" color="orange">新增地址 + </van-button>
    </div>
    <div v-else class="addr-list" v-for="(addr,index) in addrList" :key="index">
      <van-radio-group v-model="radio">
        <div class="addr-item">
          <van-radio @click="checkAddr(addr.id)" :name="addr.id" />
          <div class="addr-main">
            <p><span>{{addr.name}}</span>&nbsp;&nbsp;<span>{{addr.tel}}</span></p>
            <p>{{addr.address}}</p>
          </div>
        </div>
      </van-radio-group>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      radio: this.$store.state.address.addrList[0].id
    }
  },
  computed: {
    ...mapState({
      addrList: state => state.address.addrList
    })
  },
  methods: {
    checkAddr(id) {
      this.$emit('click', id)
      this.radio = this.$store.state.address.addrList[0].id
    }
  }
}
</script>
<style lang="scss" >
.addressList {
  .addr-list {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 0;
    .van-radio-group {
      width: 100%;
      .addr-item {
        display: flex;
        width: 100%;
        box-sizing: border-box;
        padding: 10px 0;
        border-radius: 8px;
        border: 1px solid #ddd;
        .van-radio {
          flex: 0.2;
          display: flex;
          justify-content: center;
        }
        .addr-main {
          flex: 0.7;
        }
      }
    }
  }
  .no-addr {
    padding: 10px;
    width: 100%;
    text-align: center;
    color: #555;
    p {
      margin-bottom: 10px;
    }
  }
}
</style>